import Vue from 'vue';
import './style.css';

export default Vue.extend({
        name: "N9ContextMenu",
        data() {
            return {
                show: false,
                destroy: false,
                actionListener: null,
                left: 0,
                top: 0,
                model: null,
                icon: true
            };
        },
        created() {
            var dialogs = document.getElementById("dialogContainer");
            var ele = document.createElement('div');
            ele.id = "contextmenu_" + Math.random().toString(36).substr(2);
            dialogs.appendChild(ele);
            this.$mount("#" + ele.id);
        },
        mounted() {
          this.show = true;
        },
        computed: {
            getLeft() {
              return this.left + 50 + 'px';
            },
            getTop() {
              return this.top + 5 + 'px';
            }
        },
        methods: {
            onItemClick(event) {
                if (this.model[event].disabled) {
                    return;
                }
                if (this.actionListener) {
                    this.actionListener(this.model[event], event);
                }
                this.destroy = true;
            }
        },
        template: '<Dropdown v-if="!destroy" class="n9-context-menu" :style="{top: getTop, left: getLeft}" trigger="custom" :visible="show" ' +
        '@on-clickoutside="destroy=true"' +
        '@on-click="onItemClick">\n' +
        '        <DropdownMenu slot="list">\n' +
        '            <DropdownItem v-for="(item, index) in model" :class="{disabled: item.disabled}" :disabled="item.disabled" :divided="item.divided"' +
        '               :name="index"><Icon v-if="icon" class="icon" size="20" :type="item.icon" /><span class="name">{{item.name ? item.name : item}}</span></DropdownItem>\n' +
        '        </DropdownMenu>\n' +
        '    </Dropdown>\n'
    }
);
